<style lang="scss">
@import "./base.scss";
.vue-code-mirror__h {
  display: none;
}
</style>

<template>
  <div class="page-base">
    <z-space class="page-base__article" vertical>
      <h2 style="margin-top: 0">列表数据结构</h2>

      <z-space>列表数据通用返回结构 适用(chart line, list)</z-space>
      <vue-code-mirror class="page-base__code" :js="def.d1"></vue-code-mirror>

      <z-space>对象数据通用返回结构 适用( <el-link
          href="https://newgateway.gitee.io/my/ui/components/key-val-list.html#%E4%BB%A3%E7%A0%81%E7%A4%BA%E4%BE%8B" target="_blank"
      >keyValue</el-link>)</z-space>
      <vue-code-mirror class="page-base__code" :js="def.d2"></vue-code-mirror>

      <z-space>options返回接口</z-space>
      <vue-code-mirror class="page-base__code" :js="def.options"></vue-code-mirror>

      <z-space>多个options返回接口</z-space>
      <vue-code-mirror class="page-base__code" :js="def.options2"></vue-code-mirror>

      <h2 style="margin-top: 0">增删改数据结构</h2>

      <p>数据放在body 以json结构</p>

      <h3>添加 POST</h3>
      <vue-code-mirror class="page-base__code" :js="def.d4"></vue-code-mirror>

      <h3>编辑 PUT</h3>
      <vue-code-mirror class="page-base__code" :js="def.d3"></vue-code-mirror>

      <h3>删除 DELETE</h3>
      <vue-code-mirror class="page-base__code" :js="def.d5"></vue-code-mirror>
    </z-space>
  </div>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
import {commonBase} from "@example/views/base/base";


export default {
  components: {VueCodeMirror},
  mixins: [
    commonBase
  ],
  data() {
    return {
    }
  },
  methods: {
  },
  setup() {
    let def = {
d1:
`{
  result: {
    // 指定参数
    columns: [['月份', 'month'], ['访问量', 'visit'], ['留存率', 'rate']],
    columnMap: {
      month: {
        type: 'string',
        ui: { widget: 'CusInput' },
        quick: true
      },
    },
    records: [
      {
        'month': '一月',
        'visit': 100,
        'rate': 10000,
      }
    ],
  }
}
`,
d2:
          `{
  result: {
    // 指定参数
    columns: [['月份', 'month'], ['访问量', 'visit'], ['留存率', 'rate']],
    columnMap: {
      month: {
        type: 'string',
        ui: { widget: 'CusInput' },
        quick: true
      },
    },
    obj: {
      'month': '一月',
      'visit': 100,
      'rate': 10000,
    },
  }
}
`,
      options:
          `{
  result: {
    options: [
      {
        label: '选项1',
        value: 'option1'
      },
      {
        label: '选项2',
        value: 'option2'
      }
    ]
  }
}
`,
      options2:
          `{
  result: {
    options1: [
      {
        label: '选项11',
        value: 'option11',
      },
      {
        label: '选项12',
        value: 'option12',
      },
    ],
    options2: [
      {
        label: '选项21',
        value: 'option21',
      },
      {
        label: '选项22',
        value: 'option22',
      },
    ],
  }
}
`,
d3: `
{
  id: 'sdddddddddddddddddddddddd',
  data: {
    k1: v1,
    ...
  }
}
`,
d4: `
{
  data: {
    k1: v1,
    ...
  }
}
`,
d5: `
{
  id: 'sdddddddddddddddddddddddd',
}
`
    }

    return {
      def
    }
  }
}
</script>
